<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML的应用举例</title>
    <style>

         .box{
               width: 300px;
               height: 100px;
               border:  1px solid;
         }
    </style>
</head>
<body>

 <div id="box1" class="box">
      hello
 </div>

 <select  id="sltSchool">
    <option value="1">北京大学</option>
 </select>

</body>
<script>
    var box1=   document.getElementById('box1');

     box1.innerHTML='<h1>inner box</h1>';


      var schools= [{
          id:1,
          name:'清华大学'
      },{
          id:2,
           name:'北京大学'
      },{
           id:3,
           name:'天津大学'
      }]

     var sltSchool = document.getElementById('sltSchool');

    for (var i = 0; i < schools.length; i++) {

        var opt=' <option value="'+schools[i].id+'">'+schools[i].name+'</option>';

    //   var opt=' <option value="'+schools[i].id+'">'+schools[i].name+'</option>';
    //     var opt2='<option value="'
    //         .concat(schools[i].id)
    //         .concat('">')
    //         .concat(schools[i].name)
    //         .concat('</option>');

        sltSchool.innerHTML +=opt;
    }


</script>
</html>